<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>
        
        <view class="form">
            <uv-form labelPosition="left" labelWidth="80" :model="business" :rules="rules" ref="login">
                <uv-form-item label="手机号码" prop="mobile" borderBottom>
                    <uv-input v-model="business.mobile" border="none" placeholder="请输入手机号码"></uv-input>
                </uv-form-item>
                
                <uv-form-item label="密码" prop="password" borderBottom>
                    <uv-input type="password" v-model="business.password" border="none" placeholder="请输入密码"></uv-input>
                </uv-form-item>
                
                <view style="margin-top:25px">
                    <uv-button type="primary" :plain="true" @click="OnSubmit">登录注册</uv-button>
                </view>

                <view class="btn" @click="ToHome">返回首页</view>
            </uv-form>
        </view>
        
        <!-- 消息提示 -->
        <uv-toast ref="notice"></uv-toast>
    </view>
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    
    let notice = ref()
    let login = ref()
    
    onShow(() => {
        let IsLogin = proxy.$business
        if(Object.getOwnPropertyNames(IsLogin.value).length > 0)
        {
            notice.value.show({
                type: 'error',
                icon: 'close-circle',
                message: '您已进行登录，无需重复登录'
            })
            
            uni.$uv.route({
                type: 'back',
                delta: 1, //返回的层级
            })
            
            return false
        }
    })
    
    let business = ref({
        mobile: '13888888666',
        password: '123456'
    })
    
    let rules = ref({
        mobile: [
            {
                type: 'string',
                required: true, //要求必填
                message: '手机号码不能为空',
                trigger: ['change', 'blur'], //触发的事件动作
            },
            {
                //自定义验证函数
                validator: (rule, value, callback) => uni.$uv.test.mobile(value),
                message: '手机号码格式有误，请重新填写',
                trigger: ['change', 'blur'], //触发的事件动作
            },
        ],
        password: [
            {
                type: 'string',
                required: true,
                message: '密码不能为空',
                trigger: ['blur', 'change']
            }
        ]
    })
    
    const OnSubmit = async () => {
        // 表单校验
        login.value.validate().then(async (res) => {
            let params = {
                mobile: business.value.mobile,
                password: business.value.password
            }
            
            let result = await uni.$uv.http.post('/business/WebLogin', params)
            
            if(result.code == 0)
            {
                notice.value.show({
                    type: 'error',
                    icon: 'close-circle',
                    message: result.msg
                })
                return false
            }
            
            // 存储用户的信息
            uni.setStorageSync('business', result.data)
            
            proxy.$business.value = result.data
            
            notice.value.show({
                type: 'success',
                message: result.msg,
                complete: () => {
                    uni.$uv.route({
                        type: 'back',
                        delta: 1
                    })
                }
            })
            
            return false
        }).catch(err => {
            notice.value.show({
                type: 'error',
                icon: 'close-circle',
                message:'表单填写有误，请重新填写'
            })
        })
    }
    
    // 返回首页
    const ToHome = () => {
        uni.$uv.route({
            type: 'reLaunch',
            url: '/pages/validate/validate'
        })
    }
</script>

<style>
	page {
		background-color: #f8fafe;
	}

	.container .avatar {
		text-align: center;
		background-color: #fff;
	}

	.avatar image {
		width: 120px;
		height: 120px;
		margin: 50px 0;
		border-radius: 50%;
	}

	.form {
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.btn {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
        color: #888;
        font-size: 12px;
	}

	.u-icon {
		margin-left: 10px;
	}
</style>
